<template>
  <div>
    <svg class="icon" :class="size" :style="{ color: color }" aria-hidden="true">
      <use :xlink:href="'#icon-' + name"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
import {}from "vue"

interface propIcon {
  name: string,
  size?: string,
  color?: string
}

withDefaults(defineProps<propIcon>(),{
  name: "kefu",
  size: "sm",  // sm小号 md中号 lg大号
  color: "#646464"
});
</script>

<style scoped lang="scss">
.icon{
  //填充颜色
  fill: currentColor;
  overflow: hidden; 
}
.sm{
  width: 20px;
  height: 20px;
}
.md{
  width: 30px;
  height: 30px;
}
.lg{
  width: 40px;
  height: 40px;
}
</style>